<!doctype html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Portfolio Image Navigation with jQuery</title>
		<link rel="shortcut icon" href="../favicon.ico">
		<meta name="description" content="Portfolio Image Navigation with jQuery" />
        <meta name="keywords" content="jquery, plugin, navigation, portfolio, images, 2d, scroll to, template" />
		<meta name="author" content="Marcin Dziewulski for Codrops" />
		<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow' rel='stylesheet' type='text/css' />
		<link href="css/style.css" rel="stylesheet" type="text/css" />
		<script src="js/jquery.js" type="text/javascript"></script>
		<script src="js/portfolio.js" type="text/javascript"></script>
		<script src="js/init.js" type="text/javascript"></script>
	</head>
	<body>
		<div id="header">
			<a href="http://tympanus.net/Development/FullscreenGridPortfolioTemplate/">
				<span>&laquo; Previous Demo: </span>Expanding Fullscreen Grid Portfolio
			</a>
			<span class="right_ab">
				<a href="http://www.flickr.com/photos/ag2r/" target="_blank">Images by Angelo González</a>
				<a href="http://tympanus.net/codrops/2011/08/09/portfolio-image-navigation/ "><strong>back to the Codrops post</strong></a>
			</span>
		</div>
		<h1>Portfolio Image Navigation</h1>
		<div id="portfolio">
			<div id="background"></div>		
			<div class="arrows">
				<a href="#" class="up">Up</a>
				<a href="#" class="down">Down</a>
				<a href="#" class="prev">Previous</a>
				<a href="#" class="next">Next</a>
			</div>
			<div class="gallery">
				<div class="inside">
					<div class="item">
						<div><img src="images/1.jpg" alt="image1" /></div>
						<div><img src="images/2.jpg" alt="image2" /></div>
						<div><img src="images/3.jpg" alt="image3" /></div>
					</div>
					<div class="item">
						<div><img src="images/4.jpg" alt="image4" /></div>
						<div><img src="images/5.jpg" alt="image5" /></div>
					</div>
					<div class="item">
						<div><img src="images/6.jpg" alt="image6" /></div>
						<div><img src="images/7.jpg" alt="image7" /></div>
						<div><img src="images/8.jpg" alt="image8" /></div>
						<div><img src="images/9.jpg" alt="image9" /></div>
						<div><img src="images/10.jpg" alt="image10" /></div>
						<div><img src="images/11.jpg" alt="image11" /></div>
					</div>
					<div class="item">
						<div><img src="images/12.jpg" alt="image12" /></div>
						<div><img src="images/13.jpg" alt="image13" /></div>
						<div><img src="images/14.jpg" alt="image14" /></div>
						<div><img src="images/15.jpg" alt="image15" /></div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>

